<style>
    * {
        margin:0;
        padding:0;
    }
    body{
        background-color: rgba(0,0,0,0.1);
    }
</style>
<body>
    <div id="container"></div>
    <script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
    <script id="vertexShader" type="x-shader/x-vertex">
        void main() {
            gl_Position = vec4( position, 1.0 );
        }
    </script>


    <!-- <script id="fragmentShader" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision mediump float;
        #endif

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;

        // Plot a line on Y using a value between 0.0-1.0
        float plot(vec2 st) {    
            return smoothstep(0.02, 0.0, abs(st.y - st.x));
        }

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution;
            
            float y = st.x;
            // 构建初始三维向量
            vec3 color = vec3(y);

            // Plot a line
            float pct = plot(st);
            color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);

            gl_FragColor = vec4(color,1.0);
        }
    </script> -->


    <!-- <script id="fragmentShader" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision mediump float;
        #endif

        #define PI 3.14159265359

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;

        float plot(vec2 st, float pct){
        return  smoothstep( pct-0.02, pct, st.y) -
                smoothstep( pct, pct+0.02, st.y);
        }

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution;

            float y = pow(st.x,5.0);

            vec3 color = vec3(y);

            float pct = plot(st,y);
            color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);

            gl_FragColor = vec4(color,1.0);
        }

    </script> -->


    <script id="fragmentShader" type="x-shader/x-fragment">
        //smoothstep函数

        #ifdef GL_ES
        precision mediump float;
        #endif

        #define PI 3.14159265359

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;

        float plot(vec2 st, float pct){
        return  smoothstep( pct-0.02, pct, st.y) -
                smoothstep( pct, pct+0.02, st.y);
        }

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution;

            float y = smoothstep(0.1,0.9,st.x);

            vec3 color = vec3(y);

            float pct = plot(st,y);
            color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);

            gl_FragColor = vec4(color,1.0);
        }

    </script>

    <script>
        var container;
        var camera, scene, renderer;
        var uniforms;

        init();
        animate();

        function init() {
            container = document.getElementById( 'container' );

            camera = new THREE.Camera();
            camera.position.z = 1;

            scene = new THREE.Scene();

            var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

            uniforms = {
                u_time: { type: "f", value: 1.0 },
                u_resolution: { type: "v2", value: new THREE.Vector2() }
            };

            var material = new THREE.ShaderMaterial( {
                uniforms: uniforms,
                vertexShader: document.getElementById( 'vertexShader' ).textContent,
                fragmentShader: document.getElementById( 'fragmentShader' ).textContent
            } );

            var mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );

            container.appendChild( renderer.domElement );

            onWindowResize();
            window.addEventListener( 'resize', onWindowResize, false );
        }

        function onWindowResize( event ) {
            renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
            uniforms.u_resolution.value.x = renderer.domElement.width/2;
            uniforms.u_resolution.value.y = renderer.domElement.height/2;
        }

        function animate() {
            requestAnimationFrame( animate );
            render();
        }

        function render() {
            uniforms.u_time.value += 0.05;
            renderer.render( scene, camera );
        }
    </script>
</body>